<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>微博</title>
    <link href="style/weibo.css" rel="stylesheet" type="text/css" />
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="jyArea">

    </div>
</body>
<script type="text/babel">
    // 1.创建axios请求
    const request = axios.create({
        baseURL: 'http://localhost:8081'
    })
    // 2.响应拦截器，做数据处理和响应失败的处理
    request.interceptors.response.use((res) => {
        // 2.1 解构赋值获取响应的数据ok和msg
        const { ok, msg } = res.data
        // 2.2 通过ok判断如果请求失败就提示错误信息,否则就返回响应数据
        if (ok === -1) {
            alert(msg)
            // 2.3 请求失败返回一个等待状态的promise，停止后续操作
            return new Promise(() => { })
        }
        return res.data
    })
    // 3.创建App组件，处理返回数据
    class App extends React.Component {
        // 创建状态，记录微博评论
        state = {
            contentList: []
        }

        // 3.1 创建ref，准备获取输入框的value
        content = React.createRef()
        // 3.2 添加微博的函数
        async addWeibo() {
            // 3.2.1 通过ref获取input的value
            const content = this.content.current.value.trim()
            if (content.length === 0) {
                alert('内容不能为空')
                return
            }
            // 3.2.2 发请求写入数据
            const result = await request.post('/weibo', { content })
            alert(result.msg)
            // 3.2.3 清空输入框
            this.content.current.value = null
            this.getWeibo()
        }

        // 4 获取微博的函数
        async getWeibo() {
            const result = await request.get('/weibo', {
                params: {
                    pageNo:1,
                    pageSize:5
                }
            })
            const { contentList } = result
            // 4.1 修改微博评论状态
            this.setState({
                contentList
            })
        }
        componentDidMount() {
            this.getWeibo()
        }
        render() {
            return (
                <>
                    <div className="takeComment">
                        <textarea ref={this.content} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                        <div className="takeSbmComment">
                            <input onClick={this.addWeibo.bind(this)} type="button" className="inputs" value="" />
                        </div>
                    </div>


                    <div className="commentOn">
                        <div className="noContent" style={{display:this.state.contentList.length===0?"block":"none"}}>暂无留言</div>
                        <div className="messList">
                            {
                                this.state.contentList.map((item) => {
                                    return (
                                        <div className="reply" key={item._id}>
                                            <p className="replyContent">{item.content}</p>
                                            <p className="operation">
                                                <span className="replyTime">{item.addTime}</span>
                                                <span className="handle">
                                                    <a href="" className="top">{item.topNum}</a>
                                                    <a href="" className="down_icon">{item.downNum}</a>
                                                    <a href="" className="cut">删除</a>
                                                </span>
                                            </p>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="page">
                            <a href="" className="active">1</a>
                            <a href="">2</a>
                            <a href="">3</a>
                        </div>
                    </div>
                </>
            )
        }
    }
    ReactDOM.createRoot(document.querySelector(".jyArea")).render(<App />)
</script>

</html>